<template>
  <div class="home">
    <el-container>
      <el-header
        style="background:linear-gradient(90deg,rgba(54,81,223,1),rgba(41,146,253,1));"
      >
        <M_Header></M_Header>
      </el-header>
      <el-main style="background-color: #F7F9FD;min-height: calc(100vh - 64px)">
        <div style="width: 100%" align="center">
          <div style="width: 1200px;box-sizing: border-box" align="left">
            <el-row style="padding-top: 20px">
              <el-button type="primary" @click="showCreateConfDialog()">
                <i class="el-icon-plus"></i>
                创建会议
              </el-button>
              <!--<el-button @click="gotoTest()">进入测试页面</el-button>-->
            </el-row>
            <el-row>
              <div>
                <ul style="list-style-type:none;">
                  <li v-for="(item, index) in confData" :key="index">
                    <div class="confCard">
                      <el-row>
                        <el-col :span="18">
                          <div class="confTitle">
                            <p>
                              {{ item.description }}
                            </p>
                          </div>
                          <div class="confContent">
                            <el-row>
                              <el-col :span="4">
                                <p>{{ item.createTime }}</p>
                              </el-col>
                              <el-col :span="4">
                                <div v-show="item.promoter !== null">
                                  <p>创建人：{{ item.promoter }}</p>
                                </div>
                              </el-col>
                              <el-col :span="10">
                                <div v-show="item.mode !== null">
                                  <p>会议类型：{{ getConfModeString(item.mode) }}</p>
                                </div>
                              </el-col>
                            </el-row>
                          </div>
                          <div class="confUser">
                            <div>
                              <div>
                                <ul style="list-style-type:none;">
                                  <li
                                    v-for="(i, j) in item.userlist"
                                    :key="j"
                                    class="confUserList"
                                  >
                                    <div
                                      align="center"
                                      style="text-align: center"
                                    >
                                      <p
                                        style="font-size: 16px;margin-top: 15px"
                                      >
                                        {{ i.realName.slice(0, 1) }}
                                      </p>
                                    </div>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6" align="right">
                          <div style="margin-top: 50px;margin-right: 38px">
                            <el-button
                              type="primary"
                              round
                              plain
                              style="width: 100px"
                              @click="showJoinConfDialog(item)"
                              >加入</el-button
                            >
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </li>
                </ul>
              </div>
            </el-row>
          </div>
        </div>
      </el-main>
      <!--<el-footer>-->
      <!--<div style="margin-top: 15px">-->
      <!--<el-pagination-->
      <!--background-->
      <!--layout="prev,pager,next"-->
      <!--:total="100"-->
      <!--&gt;</el-pagination>-->
      <!--</div>-->
      <!--</el-footer>-->
    </el-container>
    <Modal
      v-model="createConfDialog"
      :mask-closable="false"
      :footer-hide="true"
      width="550"
    >
      <div slot="header">
        <p style="color: #fff;margin-left: 33px;font-size: 16px">
          创建会议
        </p>
      </div>
      <el-form
        v-model="createConfForm"
        class="demo-ruleForm"
        ref="createConfForm"
      >
        <el-form-item prop="description">
          <input
            v-model="createConfForm.description"
            placeholder="请添加会议标题"
            type="text"
            class="confDescription"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item style="border-bottom: 1px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">音频输入</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-select
                  style="width: 300px"
                  v-model="createConfForm.microphone"
                >
                  <el-option
                          label="禁用麦克风"
                          value="0"
                  ></el-option>
                  <el-option
                    v-for="item in microphoneList"
                    :key="item.deviceId"
                    :label="item.label"
                    :value="item.deviceId"
                  ></el-option>

                </el-select>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item style="border-bottom: 10px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">视频输入</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row><el-select @change="selectCameraChanged" style="width: 300px" v-model="createConfForm.camera">
                  <el-option
                          label="禁用摄像头"
                          value="0"
                  ></el-option>
                  <el-option
                          label="屏幕共享"
                          value="-1"
                  ></el-option>
                  <el-option
                          v-for="item in cameraList"
                          :key="item.deviceId"
                          :label="item.label"
                          :value="item.deviceId"
                  ></el-option>
                </el-select>
                </el-row>
                <el-row>
                    <el-radio-group :disabled="cameraDisabled" v-model="createConfForm.size" size="small">
                      <el-radio-button v-for="(item, index) in constants.resList" :label="item.value" :key="index+1">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-row>
                <el-row>
                    <el-radio-group :disabled="cameraDisabled" v-model="createConfForm.fps" size="small">
                      <el-radio-button v-for="(item, index) in constants.fpsList" :label="item.value" :key="index+1">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item style="border-bottom: 1px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">会议类型</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row>
                  <el-select style="width: 300px" v-model="createConfForm.confmode">
                    <el-option
                            v-for="(item, index) in constants.confModeList"
                            :key="index+1"
                            :label="item.label"
                            :value="item.value"
                    ></el-option>
                  </el-select>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item style="border-bottom: 1px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">会场分辨率</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row><el-radio-group v-model="createConfForm.confsize" size="small">
                  <el-radio-button v-for="(item, index) in constants.resList"
                          :label="item.value" :key="index+1"
                  >{{item.label}}</el-radio-button>
                </el-radio-group>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item style="border-bottom: 10px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">会场帧率</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row><el-radio-group v-model="createConfForm.conffps" size="small">
                  <el-radio-button v-for="(item, index) in constants.fpsList"
                                   :label="item.value" :key="index+1"
                  >{{item.label}}</el-radio-button>
                </el-radio-group>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item style="border-bottom: 1px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">会场最小码率</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row><el-radio-group v-model="createConfForm.confminbr" size="small">
                  <el-radio-button v-for="(item, index) in constants.brList"
                             :label="item.value" :key="index+1"
                  >{{item.label}}</el-radio-button>
                </el-radio-group>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item style="border-bottom: 1px solid #F5F7FA">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">会场最大码率</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row><el-radio-group v-model="createConfForm.confmaxbr" size="small">
                  <el-radio-button v-for="(item, index) in constants.brList"
                                   :label="item.value" :key="index+1"
                  >{{item.label}}</el-radio-button>
                </el-radio-group>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: center;margin-top: 60px;padding-bottom: 40px">
        <button class="btn-createConf" @click="clickCreateConf()">
          创建会议
        </button>
      </div>
    </Modal>
    <Modal
      v-model="joinConfDialog"
      :mask-closable="false"
      :footer-hide="true"
      width="880"
    >
      <div slot="header">
        <p style="color: #fff;margin-left: 23px;font-size: 16px">
          会议详情
        </p>
      </div>
      <el-row style="height:540px">
        <el-col
          :span="10"
          style="border-right: 1px solid #E6E6E6; height: 540px"
        >
          <el-row>
            <el-row>
              <div class="joinDesc">
                <p>{{ joinConfForm.desc }}</p>
              </div>
            </el-row>
            <el-row>
              <div style=" border-bottom: 10px solid #F5F7FA;"></div>
            </el-row>
            <el-row>
              <div class="joinPromoter">
                <el-col :span="8">
                  <p>创建者</p>
                </el-col>
                <el-col :span="16">
                  <p>
                    {{
                      joinConfForm.promoter ? joinConfForm.promoter : "测试房间"
                    }}
                  </p>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="joinPromoter">
                <el-col :span="8">
                  <p>开始时间</p>
                </el-col>
                <el-col :span="16">
                  <p>{{ joinConfForm.createTime }}</p>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="joinPromoter">
                <el-col :span="8">
                  <p>会议类型</p>
                </el-col>
                <el-col :span="16">
                  <p>{{ getConfModeString(joinConfForm.mode) }}</p>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="joinPromoter">
                <el-col :span="8">
                  <p>最大画面数</p>
                </el-col>
                <el-col :span="16">
                  <p>{{ joinConfForm.picnum }}</p>
                </el-col>
              </div>
            </el-row>
            <el-row>
              <div class="joinPromoter">
                <el-col :span="8">
                  <p>画面模式</p>
                </el-col>
                <el-col :span="16">
                  <p>{{ getPicModeString(joinConfForm.picmode) }}</p>
                </el-col>
              </div>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="14">
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">音频输入</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-select
                        style="width: 300px"
                        v-model="createConfForm.microphone"
                >
                  <el-option
                          label="禁用麦克风"
                          value="0"
                  ></el-option>
                  <el-option
                          v-for="item in microphoneList"
                          :key="item.deviceId"
                          :label="item.label"
                          :value="item.deviceId"
                  ></el-option>

                </el-select>
              </el-col>
            </el-row>
          </div>
          <div style="height: 72px;padding-top: 16px">
            <el-row>
              <el-col :span="6">
                <div style="margin-left: 47px">
                  <p style="font-size: 15px">视频输入</p>
                </div>
              </el-col>
              <el-col :span="18" align="right" style="padding-right: 45px">
                <el-row><el-select @change="selectCameraChanged" style="width: 300px" v-model="createConfForm.camera">
                  <el-option
                          label="禁用摄像头"
                          value="0"
                  ></el-option>
                  <el-option
                          label="屏幕共享"
                          value="-1"
                  ></el-option>
                  <el-option
                          v-for="item in cameraList"
                          :key="item.deviceId"
                          :label="item.label"
                          :value="item.deviceId"
                  ></el-option>
                </el-select>
                </el-row>
                <el-row >
                    <el-radio-group :disabled="cameraDisabled" v-model="createConfForm.size" size="small">
                      <el-radio-button v-for="(item, index) in constants.resList" :label="item.value" :key="index+1">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-row>
                <el-row >
                    <el-radio-group :disabled="cameraDisabled" v-model="createConfForm.maxbr" size="small">
                      <el-radio-button v-for="(item, index) in constants.brList" :label="item.value" :key="index+1">{{item.label}}</el-radio-button>
                    </el-radio-group>
                </el-row>
                <el-row>
                  <el-radio-group :disabled="cameraDisabled" v-model="createConfForm.fps" size="small">
                    <el-radio-button v-for="(item, index) in constants.fpsList" :label="item.value" :key="index+1">{{item.label}}</el-radio-button>
                  </el-radio-group>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div style="border-top:1px solid #E6E6E6;margin-top: 230px">
            <el-row style="text-align: right">
              <div style="margin: 22px 45px 26px 0">
                <button
                  class="btn-joinConf"
                  @click="clickJoinConf(joinConfForm.room)"
                >
                  加入会议
                </button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </Modal>
  </div>
</template>

<script>
// @ is an alias to /src
import M_Header from "@/components/Header.vue";
import ElementUI from "element-ui";
import VueRouter from "../../router";
const tvvsdk_constants = require("../../../public/js/sdk/tvvsdk_constants.js");
let tvvssdk;
let MLog = "MLog************************************";
export default {
  name: "Home",
  components: {
    M_Header
  },
  data() {
    return {
      sender: "",
      userInfo: "",
      realName: "",
      confData: [],
      deviceInfo: [],
      microphoneList: [],
      cameraList: [],
      createConfDialog: false,
      createConfForm: {
        description: "",
        bitrate: 4096000,
        publishers: 9,
        rec_dir: "/home/jack/videos",
        record: true,
        microphone: "0",
        camera: "0",
        speaker: "0",
        crypto: "0",
        size: tvvsdk_constants.resList[0].value,
        maxbr: tvvsdk_constants.brList[3].value,
        fps: tvvsdk_constants.fpsList[1].value,
        confmode: tvvsdk_constants.confModeList[0].value,
        confsize: tvvsdk_constants.resList[2].value,
        confminbr: tvvsdk_constants.brList[0].value,
        confmaxbr: tvvsdk_constants.brList[2].value,
        conffps: tvvsdk_constants.fpsList[1].value
      },
      joinConfDialog: false,
      joinConfForm: {
        desc: "",
        room: null,
        createTime: "",
        promoter: ""
      },
      time1: "",
      cameraDisabled: true,
      constants: tvvsdk_constants
    };
  },
  mounted() {
    this.initialize();
  },
  methods: {
    initialize() {
      tvvssdk = this.$tvvssdk;
      let _this = this;
      this.$store.dispatch("Sender");
      this.sender = this.$store.state.sender;
      this.$store.dispatch("Username");
      this.username = this.$store.state.username;
      this.$store.dispatch("RealName");
      this.realName = this.$store.state.realName;
      this.$store.dispatch("UserInfo");
      this.userInfo = this.$store.state.userInfo;
      console.log(MLog);
      console.log("tvLog-----------", this.userInfo);

      if (this.sender !== null && this.username !== null) {
        this.queryRoomList();
        this.time1 = setInterval(this.queryRoomList, 5000);
      } else {
        this.$message.error("账号信息异常，请重新登陆");
      }
    },
    //查询会议列表
    queryRoomList() {
      tvvssdk.queryRoomList(res=>{
        if (!res.success) {
          ElementUI.Message.error(res.msg);
          VueRouter.replace("/");
          return false;
        }else{
          this.confData = res.msg;
        }
      });
    },
    // 初始化设备列表
    initDeviceList() {
      let _this = this;
      this.$store.dispatch("DeviceInfo");
      this.deviceInfo = this.$store.state.deviceInfo;
      console.log(this.deviceInfo);
      tvvssdk.getAllDevices(function (devices) {
        console.log(devices);
        _this.microphoneList.length=0;
        _this.cameraList.length=0;
        devices.forEach(function (device, index, arr) {
          if(device.kind === "audioinput"){
            _this.microphoneList.push(device);
          }else if(device.kind === "videoinput"){
            _this.cameraList.push(device);
          }
        });
      });
    },

    selectCameraChanged(value){
      this.cameraDisabled = value === "0";
    },

    getConfModeString(mode){
      let modestring="未知";
      tvvsdk_constants.confModeList.forEach(function (m) {
        if(m.mode === mode){
          modestring = m.label;
        }
      });
      return modestring;
    },

    getPicModeString(mode){
      let modestring="未知";
      tvvsdk_constants.picModeList.forEach(function (m) {
        if(m.value === mode){
          modestring = m.label;
        }
      });
      return modestring;
    },

    showCreateConfDialog() {
      this.createConfForm.description = "";
      this.createConfDialog = true;
      this.initDeviceList();
    },

    clickCreateConf() {
      if (
        (this.createConfForm.description === null) |
        (this.createConfForm.description.trim() === "")
      ) {
        this.createConfForm.description = "";
        this.$message.warning("会议标题不能为空");
        return false;
      }
      console.log(this.createConfForm)
      this.clickJoinConf(this.createConfForm.description);
    },

    showJoinConfDialog(data) {
      console.log(data);
      this.joinConfForm.room = data.room;
      this.joinConfForm.promoter = data.promoter;
      this.joinConfForm.desc = data.description;
      this.joinConfForm.createTime = data.createTime;
      this.joinConfForm.mode = data.mode;
      this.joinConfForm.picnum = data.picnum;
      this.joinConfForm.picmode = data.picmode;
      this.createConfForm.confmode = data.mode;
      this.initDeviceList();

      this.joinConfDialog = true;
    },
    clickJoinConf(room) {
      let roomId = room;
      let name = this.username;

      this.$store.dispatch("SetDeviceInfo", {
        microphone: this.createConfForm.microphone,
        speaker: this.createConfForm.speaker,
        camera: this.createConfForm.camera,
        size: this.createConfForm.size,
        maxbr: this.createConfForm.maxbr,
        fps: this.createConfForm.fps,
        confmode: this.createConfForm.confmode,
        confsize: this.createConfForm.confsize,
        confminbr: this.createConfForm.confminbr,
        confmaxbr: this.createConfForm.confmaxbr,
        conffps: this.createConfForm.conffps
      });
      clearInterval(this.time1);

      // let targetName = null;
      //
      // if(this.createConfForm.confmode === tvvsdk_constants.confModeList[0].value ||
      //         this.createConfForm.confmode === tvvsdk_constants.confModeList[1].value){
      //   targetName = "VideoStreamMcu";
      // }else{
      //   targetName = "VideoStreamSfu";
      // }
      this.$router.push({
        name: "VideoStreamMcu",
        query: {
          roomId: roomId,
          name: name
        }
      });
    },
    determineList(id, list) {
      let i = false;
      for (let item in list) {
        if (id === list[item].id) {
          i = true;
          return i;
        }
      }
    },
    gotoTest() {
      this.$router.push({
        name: "Test"
      });
    }
  }
};
</script>

<style scoped>
.confCard {
  height: 138px;
  width: 1200px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 28px;
}

.confTitle {
  font-size: 20px;
  color: #171717;
  margin-top: 27px;
  margin-left: 26px;
  line-height: 30px;
}

.confContent {
  font-size: 14px;
  color: #88898f;
  margin-left: 26px;
  margin-top: 13px;
  line-height: 1px;
}

.confUser {
  margin-left: 26px;
  margin-top: 13px;
}

.confUserList {
  display: inline;
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #2992fd;
  margin-right: 12px;
  color: #ffffff;
}

.confDescription {
  border: none;
  font-size: 30px;
  color: #bababa;
  height: 100px;
  width: 100%;
  padding-left: 47px;
  padding-right: 47px;
  border-bottom: 10px solid #f5f7fa;
  outline: none;
}

.input-crypto {
  border: none;
  background-color: #e8e8e8;
  padding-left: 30px;
  margin-left: 47px;
  width: 358px;
  height: 56px;
  border-radius: 6px;
  color: #a1a1a1;
}

.btn-crypto {
  border: none;
  height: 56px;
  width: 100px;
  border-radius: 6px;
  background-color: #2992fd;
  font-size: 16px;
  color: #fff;
}

.btn-crypto:hover {
  background-color: #66b1ff;
  color: #fff;
}

.btn-createConf {
  border: none;
  width: 320px;
  height: 56px;
  background: linear-gradient(
    -90deg,
    rgba(58, 57, 212, 1),
    rgba(41, 146, 253, 1)
  );
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
}

.btn-createConf:hover {
  background: linear-gradient(
    -90deg,
    rgba(41, 146, 253, 1),
    rgba(58, 57, 212, 1)
  );
  color: #fff;
}

.joinDesc {
  margin: 30px 0 0 40px;
  font-size: 20px;
}

.joinCreateTime {
  margin: 30px 0 35px 40px;
  font-size: 18px;
}

.joinPromoter {
  margin: 30px 0 0 40px;
  font-size: 16px;
}

.btn-joinConf {
  border: none;
  width: 170px;
  height: 45px;
  background: linear-gradient(
    -90deg,
    rgba(58, 57, 212, 1),
    rgba(41, 146, 253, 1)
  );
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
}

.btn-joinConf:hover {
  background: linear-gradient(
    -90deg,
    rgba(41, 146, 253, 1),
    rgba(58, 57, 212, 1)
  );
  color: #fff;
}
</style>
